<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input
              v-model="formInline.keyword"
              placeholder="根据编号搜索"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item> -->
          <div style="float: right">
            <el-button @click="onSubmit" size="mini">清除</el-button>
            <el-button type="primary" @click="onSubmitnum" size="mini"
              >搜索</el-button
            >
          </div>
          <!-- </el-form-item> -->
        </el-form>
        <!-- alert -->
        <el-alert
          :title="'数据一共' + total + '条'"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
        <!-- 表格 -->
        <el-table :data="list" style="width: 100%; white-space: pre-wrap">
          <el-table-column prop="id" label="编号" width="190">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="180"> </el-table-column>
          <el-table-column prop="questionNum" label="题目编号" width="190">
            <template slot-scope="scope">
              <a
                style="color: rgb(11, 170, 250)"
                @click="rowClick(scope.row)"
                >{{ scope.row.questionNum }}</a
              >
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="180">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="180">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="180">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="small"
                plain
                @click="handleClick(scope.row)"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 -->
        <div class="dialogClass">
        <el-dialog
          title="题目预览"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose"
        >
          <el-descriptions class="myDescriptions" :column="4">
            <el-descriptions-item label="【题型】">{{
              dialogList.questionType == 1
                ? '单选'
                : dialogList.questionType == 2
                ? '多选'
                : '简答'
            }}</el-descriptions-item>
            <el-descriptions-item label="【编号】">{{
              dialogList.id
            }}</el-descriptions-item>
            <el-descriptions-item label="【难度】">{{
              dialogList.difficulty == 1
                ? '简单'
                : dialogList.difficulty == 2
                ? '一般'
                : '困难'
            }}</el-descriptions-item>
            <el-descriptions-item
              id="kl"
              contentClassName="newContent"
              label="【标签】"
            >
              {{ dialogList.tags }}
            </el-descriptions-item>
            <el-descriptions-item label="【学科】">{{
              dialogList.subjectName
            }}</el-descriptions-item>
            <el-descriptions-item label="【目录】">{{
              dialogList.directoryName
            }}</el-descriptions-item>
            <el-descriptions-item label="【方向】">{{
              dialogList.direction
            }}</el-descriptions-item>
          </el-descriptions>

          <el-descriptions :colon="false" :column="1">
            <el-descriptions-item label="【题干】："> </el-descriptions-item>
            <el-descriptions-item>
              <div style="color: blue" v-html="dialogList.question"></div
            ></el-descriptions-item>
            <el-descriptions-item
              :label="
                dialogList.questionType == 1
                  ? '单选 选项：'
                  : dialogList.questionType == 2
                  ? '多选 选项：'
                  : '简答 选项：'
              "
              >(以下选中的选项为正确答案)
            </el-descriptions-item>
            <el-descriptions-item>
              <el-checkbox-group v-model="checkBox">
                <el-checkbox
                  v-for="(item, index) in dialogList.options"
                  :key="index"
                  :label="item.id"
                  :checked="item.isRight == 1"
                  >{{ item.title }}</el-checkbox
                >
              </el-checkbox-group>
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions style="border-bottom: none" :column="1">
            <el-descriptions-item label="【参考答案】"
              ><el-button @click="videoFlag = true" type="danger" size="small"
                >视频答案预览</el-button
              ></el-descriptions-item
            >
          </el-descriptions>
          <el-descriptions v-if="videoFlag" :colon="false" :column="1">
            <el-descriptions-item>
              <video
                preload="auto"
                style="width: 300px; height: 300px"
                controls
                autoplay
                :src="dialogList.videoURL"
              ></video>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :colon="false" :column="1">
            <el-descriptions-item class="anyText" label="【答案解析】"
              >:
            </el-descriptions-item>
            <el-descriptions-item>
              <span v-html="dialogList.answer"></span>
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions :column="2">
            <el-descriptions-item label="【题目备注】">{{
              dialogList.remarks
            }}</el-descriptions-item>
          </el-descriptions>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closeDialog" class="guanbi">关 闭</el-button>
            </span>
        </el-dialog>
        </div>
        <!-- 分页 -->
        <div style="float: right; margin: 0 30px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="formInline.pagesize"
            layout="prev,pager,next,sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      list: [], //准备了存储接口返回的数据
      dialogVisible: false,
      checkBox: [],
      videoFlag: false,
      total: 0, //数据总数
      styleContent: {
        width: '300px',
        display: 'inline-block'
      },
      styleLabel: {
        width: '200px'
      },
      formInline: {
        keyword: '', //查询条件关键字
        pagesize: 20, //查询条件条数
        page: 1 //查询条件页数
      },
      dialogList: {}
    }
  },
  // 点开页面自动获取数据
  created () {
    this.randoms()
  },
  methods: {
    closeDialog () {
      this.videoFlag = false
      this.dialogVisible = false
    },
    // 清除输入框内容
    onSubmit () {
      this.formInline.keyword = ''
    },
    // 点击搜索时渲染页面
    onSubmitnum () {
      this.randoms()
    },
    async randoms () {
      // 调接口，渲染
      const res = await randoms(this.formInline)
      // 遍历循环，针对返回的题型数据做判断
      res.data.items.map(item => {
        if (item.questionType == '1') {
          item.questionType = '单选'
        } else if (item.questionType == '2') {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
        // 循环拿到的编号是数组，要再遍历得到每个数组中值，返回新的数组，再.join转换成字符串
        item.questionNum = item.questionIDs.map(item => item.number).join('\n')
      })
      this.list = res.data.items
      this.total = res.data.counts

      // console.log(res)
    },
    // 每页/条改变时，触发此方法，val是当前点击的条数，把最新条数赋值给数据，重新渲染
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.formInline.pagesize = val
      this.createAPI()
    },
    // 每页改变时，触发此方法，val是当前点击的页数，把最新页数赋值给数据，重新渲染
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.formInline.page = val
      this.createAPI()
    },
    async rowClick (row) {
      this.dialogVisible = true
      let newId = { id: 21 }
      // let newId = { id: row.id }
      const res = await detail(newId)
      this.dialogList = res.data
      console.log(this.dialogList)
      console.log(res)
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 点击删除调接口
    handleClick(row) {
      // console.log(row);
      // 提示框
      this.$confirm('此操作将永久删除该组件你, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确认
        await removeRandoms(row)
        this.$message({
        type: 'success',
        message: '删除成功!'
      });
        // 重新渲染页面
        this.randoms()
      }).catch(() => {
        // 点击取消       
      });
    }
  }
}
</script>

<style scoped>
.el-descriptions {
  border-bottom: solid 1px lightgray;
  padding: 5px 0;
}
/* .dialogClass >>> .el-dialog__footer {
  display: flex;
  justify-content: end;
} */
.el-checkbox {
  display: block;
}
.dialogClass {
  position: relative;
}
.guanbi {
  position: absolute;
  right:20px;
  bottom: 9px;
}
</style>
<style>
.myDescriptions table tbody:first-child tr td:last-child {
  width: 35% !important;
}

</style>
